extends layout

block content

  div(id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel")
    div(class="carousel-inner")
      // 集中
      div(class="carousel-item active") 
        h5(class="badge badge-primary") 集中计数 집중 계수              
        div(class="row")    
          div(class="col-lg-6 col-md-6, col-sm-12")
            h5 F1  
            table(class="table")
              each val in  data_area_1
                if val.k.startsWith('F1')
                  tr
                    td
                      span(class='btn btn-outline-info') #{val.k}
                    td 
                      span(id=val.k+'_11') #{val.dy_0} 
                      br/ 
                      span(id=val.k+'_1') #{val.dy}
                    td 
                      span(id=val.k+'_12') #{val.nt_0} 
                      br/ 
                      span(id=val.k+'_2') #{val.nt}
                    td 
                      span(id=val.k+'_10') #{val.total_0}
                      br/ 
                      span(id=val.k) #{val.total}
          div(class="col-lg-6 col-md-6, col-sm-12")          
            h5 F2
            table(class="table")
              each val in  data_area_1
                if val.k.startsWith('F2')
                  tr
                    td
                      span(class='btn btn-outline-primary') #{val.k}
                    td  
                      span(id=val.k+'_11') #{val.dy_0} 
                      br/  
                      span(id=val.k+'_1') #{val.dy}
                    td  
                      span(id=val.k+'_12') #{val.nt_0} 
                      br/  
                      span(id=val.k+'_2') #{val.nt}
                    td  
                      span(id=val.k+'_10') #{val.total_0}
                      br/  
                      span(id=val.k) #{val.total}    
      // 分立 
      div(class="carousel-item")
        h5(class="badge badge-info") 分立计数 분립 계수
        div(class="row")          
          div(class="col-lg-6 col-md-6, col-sm-12")            
            h5 F1 
            table(class="table")
              each val in  data_area_2
                if val.k.startsWith('F1')
                  tr
                    td
                      span(class='btn btn-outline-success') #{val.k}
                    td  
                      span(id=val.k+'_11') #{val.dy_0} 
                      br/  
                      span(id=val.k+'_1') #{val.dy}
                    td  
                      span(id=val.k+'_12') #{val.nt_0} 
                      br/  
                      span(id=val.k+'_2') #{val.nt}
                    td  
                      span(id=val.k+'_10') #{val.total_0}
                      br/  
                      span(id=val.k) #{val.total}
          div(class="col-lg-6 col-md-6, col-sm-12")          
            h5 F2
            table(class="table")
              each val in  data_area_2
                if val.k.startsWith('F2')
                  tr
                    td
                      span(class='btn btn-outline-danger') #{val.k}
                    td  
                      span(id=val.k+'_11') #{val.dy_0} 
                      br/  
                      span(id=val.k+'_1') #{val.dy}
                    td  
                      span(id=val.k+'_12') #{val.nt_0} 
                      br/  
                      span(id=val.k+'_2') #{val.nt}
                    td  
                      span(id=val.k+'_10') #{val.total_0}
                      br/  
                      span(id=val.k) #{val.total}                      

append scripts
  script(src='https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.slim.js')
  script.
    $('.carousel').carousel({
      interval: 10000,
      pause: false,
    });

    let exclude = ['factory', 'is_day'];
    let socket = io.connect('http://' + document.domain + ':' + location.port);
    socket.on('index_data', function (data) {
      console.log(data);
      for (let [k,v] of Object.entries(data)) {
        if ($('#' + k).length <= 0) {
          //console.log('忽略：' + k);
          continue;
        } 

        // 更新总数
        $('#' + k).html(v);
        if (data.is_day) {
          $('#' + k + '_1').html(v);
        } else {
          let v_day = parseInt($('#' + k + '_1').html());
          // 强制刷新
          if (v_day < 0) {
            location.reload(true);
            }
          $('#' + k + '_2').html(v - v_day);
        }
      }  // for
    });

    socket.on('refresh', function (data) {
      if (data)
        window.location.reload(true);

    });

